<template>
  <view 
    class="ai-floating-button" 
    :class="{ shake: shouldShake }"
    @click="handleClick"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <text class="ai-icon">🤖</text>
    <view v-if="hasUnread" class="unread-badge">
      <text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AIFloatingButton',
  props: {
    // 是否有未读消息
    hasUnread: {
      type: Boolean,
      default: false
    },
    // 未读消息数量
    unreadCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      shouldShake: false,
      // 拖拽相关（可选功能，暂时禁用）
      isDragging: false,
      startX: 0,
      startY: 0
    }
  },
  mounted() {
    // 首次加载时抖动吸引注意
    setTimeout(() => {
      this.triggerShake()
    }, 1000)
  },
  methods: {
    handleClick() {
      if (!this.isDragging) {
        this.$emit('open-chat')
      }
    },
    
    // 触发抖动动画
    triggerShake() {
      this.shouldShake = true
      setTimeout(() => {
        this.shouldShake = false
      }, 500)
    },
    
    // 拖拽功能（预留，暂不启用）
    handleTouchStart(e) {
      // this.startX = e.touches[0].pageX
      // this.startY = e.touches[0].pageY
      // this.isDragging = false
    },
    
    handleTouchMove(e) {
      // const moveX = Math.abs(e.touches[0].pageX - this.startX)
      // const moveY = Math.abs(e.touches[0].pageY - this.startY)
      // if (moveX > 5 || moveY > 5) {
      //   this.isDragging = true
      // }
    },
    
    handleTouchEnd(e) {
      // setTimeout(() => {
      //   this.isDragging = false
      // }, 100)
    }
  }
}
</script>

<style lang="scss" scoped>
.ai-floating-button {
  position: fixed;
  right: 30rpx;
  bottom: 200rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.9);
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.6);
  }
  
  .ai-icon {
    font-size: 48rpx;
    filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
  }
  
  .unread-badge {
    position: absolute;
    top: -8rpx;
    right: -8rpx;
    min-width: 36rpx;
    height: 36rpx;
    background: #ff4757;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8rpx;
    border: 3rpx solid #fff;
    
    .badge-text {
      font-size: 20rpx;
      color: #fff;
      font-weight: 600;
      line-height: 1;
    }
  }
  
  // 抖动动画
  &.shake {
    animation: shake 0.5s ease-in-out;
  }
}

@keyframes shake {
  0%, 100% { 
    transform: translateX(0) rotate(0deg); 
  }
  10%, 30%, 50%, 70%, 90% { 
    transform: translateX(-8rpx) rotate(-5deg); 
  }
  20%, 40%, 60%, 80% { 
    transform: translateX(8rpx) rotate(5deg); 
  }
}
</style>


